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. Diseño de Interfaz de usuario 


1. Introducción 


e Este proyecto se compone de un frontend hecho con Angular y un backend 
hecho en PHP utilizando MySQL como base de datos. 


e Hoy en día la mayoría de empresas que tienen servicios en la nube utilizan 
APIs REST, esto se debe a que es un estándar lógico y eficiente lógico y 
eficiente para la creación de servicios web. 


e Este producto de software se adapta a cualquier tipo de empresa o 
particular que precise de una web de presentación con un blog integrado, 
además también está destinado a desarrolladores debido al API que 
incorpora el proyecto. 


e Se busca cubrir la demanda que tiene las webs de tipo SPA (single page 
appications), las cuales no se recargan al navegar, son asíncronas, 
reactivas, ofrecen velocidad y una mejor experiencia de usuario. 
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2. Requisitos 


e Requisitos para el entorno de programación: 


e IDE (Muy recomendable en caso de ser desarrollador o modificar 
cosas, pero no imprescindible para ejecutar el proyecto). 


e Node.js 

e Angular CLI 

e Servidor Apache 
e PHP 


e MySQL y opcionalmente phpMyAdmin, el cual ha sido utilizado en este 
proyecto, pero se podría utilizar cualquier otro gestor que sea capaz de 
conectar con la base de datos. 
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2. Requisitos 


e Requisitos para la puesta en producción: 
e Servidor web Apache 
* PHP 
e MySQL 
e El proyecto de Angular compilado para tal fin: 


e Ejecutar la siguiente sentencia en la terminal desde el directorio del proyecto 
de Angular ng build --prod --base-href="./" 


e Y usar un fichero “.hhtaccess” con una debida configuración en caso de no 
situarse en la raíz o tener problemas tan comunes en algunos casos como de 
redireccionamiento, que se puede solventar desde una configuración desde el 
servidor que lo aloja. 
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2. Requisitos 


* Requisitos para puesta de producción: 
e Configuración del fichero “.htaccess” para servidores Apache: 


<lfModule mod_rewrite.c> 
Options Indexes FollowSymLinks 
RewriteEngine On 
RewriteBase /angular-blog-proyecto-daw/ 
RewriteRule “index1.html$ - [L] 
RewriteCond %fREQUEST_FILENAME] !-f 
RewriteCond %ifREQUEST_FILENAME?) !-d 
RewriteRule . index.html [L] 

</lfíModule> 
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3. Base de datos MySQL 


e Razones para usar MySQL como gestor de base de datos: 


e Esrápido en la escritura de datos, mayormente se nota más la diferencia de las 
NoSQL cuando se trata de base de datos grandes. 


e Son robustas. 
e Es multiplataforma. 
e Esfácil de encontrar ayuda y aprender. 


e Esuna base de datos de código abierto, probada por distintos usuario y empresas 
y no tiene coste monetario. 


e Utiliza varias capas de seguridad. Contraseñas cifradas, derechos de acceso y 
privilegios para los usuarios. 


* Necesita pocos recursos de CPU o RAM y tiene una baja fuga de memoria. 
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3. Base de datos MySQL 


e Que la API sea dinámica y pueda funcionar con otras bases de 
datos no quiere decir que pueda estar construida de cualquier 
forma. 


* Debe de cumplir con los siguientes requisitos: 
e Las tablas deben de estar en plural y cada columna usar un sufijo en 
singular (columna_sufijo). 
e Laprimera columna debe de ser el ID autoincrementable y las dos 
últimas fecha de creación y fecha de actualización. 
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3. Base de datos MySQL 


* Debe de cumplir los siguientes requisitos: 


e Para relacionar las tablas, el número del ID de la tabla relacionada 
debe de estar en una columna de la tabla principal, y dicha columna 
debe tener el siguiente orden de palabras: 


id_Tabla relacionada en singular_Tabla principal en singular 


e Para realizar autenticaciones con la API, es indispensable que la tabla 
de autenticación (en este caso users) tenga siempre estas 4 columnas: 
*  email_sufijo 
password_sufijo 
token sufijo 
token _exp_sufijo 
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3. Base de datos MySQL 


e Diagrama UML de la base de datos: 
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int 
Ll varchar(255) 
*id usertype int - pb pá 
ename_usertype varchar(45) epa der a 
odate_created_usertype timesrtamp ad a 


edate updated _usertype timestamp here passes 00 


otoken_user text 
edate_created user timestamp 
edate_ updated user timestamp 


categories 


*id category int 
*name_category varchar(45) 


*date_created_ category timestamp 


*date updated category timestamp *id article int 


*id user_article int 


configsblog *titulo_article varchar(155) 
AP Ep “imagen_article varchar(155) 
OE. E ficbTo arharidsi *contenido_article MEDIUMTEXT 
ds E, el 9 *id category carticle int 
ata_cotigblog text “meta_article varchar(155) 


*date_created cofigblog timestamp 
*date updated cofigblog timestam 


*status_article int (1) 
*date_created article timestamp 
*date_updated_article timestamp 
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4. Diagrama general de arquitectura Vista/Controlador 


Cliente 
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Vista: Interfaz de usuario, que compone 
la información que envía al cliente y los 
mecanismos de iteración con este. 


Controlador: Actúa como intermediario 
entre el modelo y la vista, gestionando el 
flujo de información entre ellos y las 
transformaciones para adaptar los datos 
a las necesidades de cada uno. 


Modelo: Contiene una representación 
de los datos que maneja el sistema , su 
lógica de negocio, y sus mecanismos de 
persistencia. 


5. Backend API RESTFUL PHP con MySQL 


e Razones para usar PHP con MySQL: 


Más del 50% de las webs están hechas con esta tecnología. 
Ambos son gratuitos. 

La curva de aprendizaje es muy baja. 

Tiene una comunidad amplia para resolver dudas. 

Este tipo de entornos son fáciles de utilizar y configurar. 
Son lenguajes fiables y eficientes. 


PHP tiene un fácil acceso a software de terceros, es decir, si tenemos 
que trabajar con APIs o con software de otros clientes que está 
realizando en PHP se integra muy fácilmente. 
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5. Backend API RESTFUL PHP con MySQL 


e Las APIS REST o webservice son aplicaciones hechas por 
programadores para programadores, debido a que este no tiene 
una interfaz gráfica, devuelve información en formato XML o más 
usualmente en JSON. 

e Tipos de peticiones HTTP más usuales: 

e GET > Obtener datos 
e POST 5 Guardado 

e PUT 5 Actualización 
e DELETE > Borrado 
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5. Backend API RESTFUL PHP con MySQL 


e Tipos de respuestas HTTP más usuales: 
e 400 Not found 
e 500 Internal server Error 
e 200 OK 


e API REST vs API RESTFUL: 


e REST y RESTFUL, no es lo mismo debido a que REST solo tiene un 
tipo de petición usualmente GET mientras que RESTFUL tiene varios 
tipos de peticiones. 
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5. Backend API RESTFUL PHP con MySQL 


e Características de las API REST: 


Son desarrolladas por programadores para programadores. 
Pueden ser públicas o privadas. 
Pueden ser gratuitas o de pago. 


Algunas APIs están protegidas con un token de seguridad, podrían ser 
útil para proteger la base de datos. 


Lenguajes web que se pueden usar para construir una API REST: 
e PHP y sus frameworks. 
* Node.js, JavaScript del lado servidor. 


Es indispensable crear una documentación para su uso. 


21/06/2022 Juan Molina — PcCMant.com 


5. Backend API RESTFUL PHP con MySQL 


e Para poder hacer uso de la API de este proyecto se precisa de un 
API KEY, que se trata de un identificador único que se recibe en 
las cabeceras HTTP. 


e Enlas peticiones PUT y POST se ha utilizado un identificador 
único pasado por parámetro y un parámetro llamado “except”, el 
cual hace excepciones de estar logueado. 


e Los usuarios se identifican con un token, usando el estándar “jwt”, 
para generarlos se ha utilizado la librería “firebase/php-jwt”. 
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5. Backend API RESTFUL PHP con MySQL 


e JSON Web Token (JWT) 
e Esun algoritmo basado en JSON que permite el intercambio y la 
verificación de datos entre aplicaciones. 
e Sirve para que el cliente pueda hacer solicitudes a la API, solo si tiene 
un token válido solo esa persona podrá hacer peticiones. 
e Lostoken constan de tres partes para que sea único y irrepetible: 
+ Cabecera: Este contiene el algoritmo de cifrado. 
e Datos: Datos de usuario útiles e únicos y el ¡at (fecha de expiración de token). 
e Verificación de la firma 
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5. Backend API RESTFUL PHP con MySQL 


* Partes del JSON Web Token (JWT): 


e Cada una de estas partes viene encriptadas para que sea único e 
irrepetible y este completamente seguro para poder ser usado entre 
aplicaciones y ServiciOS. — encodes.... cn 


eyJhbGci0iJIUzI1NilsInR5cCI6IkpXVCJ9. 
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5. Backend API RESTFUL PHP con MySQL 


* Estructura de ficheros: puso 


v controllers 


*m delete.controller.php 


ontroller.php 
*% put.controller.php 
$ rou ntroller.php 
w models 
*% connection. 
Ñm delete.model.php 
tmodel.php 
st.model.php 


$ put.model.php 


E AS 


Ñ delete.php 
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5. Backend API RESTFUL PHP con MySQL 


e Postman: 
e Esuna aplicación de código diseñada para trabajar con APIs REST y 
es la más usada para probar APIs REST. 
e Tiene varias funcionalidades que facilitan su uso, como especificar el 
tipo de petición. Los distintos parámetros, el que te muestre como 
acceder a dicha API en diferentes lenguajes de programación... 
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5. Backend API RESTFUL PHP con MySQL 
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6. Fontend con Angular 


e Angular es uno de los frameworks más importantes de JavaScript 
que existen actualmente, mantenido por Google y nos permite 
hacer webs SPA, es orientado a objetos y tiene un tipado fuerte 
gracias a la sintaxis de TypeScript (Es como un JavaScript pero 
con tipado y este compilado a un JavaScript). 


e Toda iteración con el backend es asíncrona, es decir, va por 
AJAX, por peticiones HTTP asíncronas. 


e Las aplicaciones SPA son mucho más modernas, mucho más 
usables para el usuario, muchísimo más rápidas que una 
aplicación web monolítica clásica las cuales no son asíncronas y 
se recargan al cambiar de ruta, al contrario que las SPA. 
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6. Fontend con Angular 


e Motivos para usar Angular: 


Es uno de los frameworks de JavaScript más demandados. 
Permite hacer webs SPA, las cuales son muy demandadas. 


Toda su interactividad es reactiva, instantánea y asíncrona con el 
servidor. 


Una arquitectura y orden espectacular que no te ofrecen otros 
frameworks de JavaScript. 


Tipado fuerte, el 90% del lenguaje que usa es TypeScript. Esto hace 
que estemos programando, entendiendo mejor acerca de los tipos de 
datos y haciendo una aplicación más robusta en general. 
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6. Fontend con Angular 


e Motivos para usar Angular: 


e El routing es una autentica gozada, todo el tema de las rutas o las 
URLs amigables, el tema de navegación entre diferentes URLs del 
proyecto. 


e Todo va cargando y apareciendo instantáneamente 


e Esreactivo y tiene two-way data binding, esto significa que se puede 
modificar lo que está en el modelo de datos e instantáneamente va a 
aparecer ese cambio en la interfaz de usuario. 


* Se puede hacer cambios en el DOM sin manipularlo directamente de 
una manera mucho más sencilla que de manera nativa gracuas a su 
sistema de plantillas y componentes 
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6. Fontend con Angular 


e Motivos para usar Angular: 


* Los componentes son re utilizables si se desarrollan con este propósito 
e incluso reutilizarlos en otros proyectos. 


e Módulos re utilizables, los cuales son las aplicaciones que alberga un 
proyecto. 


e Tiene un lenguaje de plantillas increíble, puedes tener un montón de 
templates, incluyendo una dentro de otra, pesarle información a esas 
plantillas, tiene su propios bucles, condiciones, sus propias directivas, 
sus propios pipes, es muy rico en lo que es el tema de manipulación de 
plantillas en lo que es el uso del HTML dentro del framework y la 
limpieza que tiene. 
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6. Fontend con Angular 


e Conceptos: 


Componentes: Controla un trozo de pantalla o vista. 


Plantillas: Definen la vista de los componentes, HTML con sintaxis especial de 
Angular, trabajando con el data binding y las directivas. 


Decoradores de metadatos (patrón de diseño): Configura dinámica mente 
atributos/metadatos de las clases y componentes. 


Servicios/Providers: Son servicios que nos proveen de datos o funcionalidades 
mediante sus métodos. 


Directivas: Funcionalidades aplicables al DOM y a los elementos HTML en las 
plantillas de un componente. 


Módulo: Cada una de las aplicaciones dentro del proyecto, por defecto solo hay 
una llamada app. 
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6. Fontend con Angular 


e Estructura de ficheros por defecto en un Proyecto Angular: 


e2e — Es para temas de testing. 
node_modules > Es donde se guardan todas las dependencias, librerías, etc y todo el framework en sí. 


sre > Es en la carpeta a donde vamos a estar trabajando. 
main.ts —> Es el archivo principal de TypeScript, donde se cargan todos los componentes y carga el modulo principal del proyecto. 
styles.css 


favicon.ico 
index.html —> La plantilla principal o el html principal donde todo se carga dentro de ese html. 


enviroments —> Lo que contiene esta carpeta para configurar los diferentes entornos de desarrollo. 


assets — 
app — La carpeta más importante 
app.component.ts-> Es el componente por defecto. 
app.module.ts -> Es el módulo principal 
.«editconfig — Un fichero de configuración para el editor de código. 


.gitignore —> fichero de repositorio git. sirve para excluir ficheros y carptetas del repositorio git del proyecto. 
angular.json — Sirve para configurar el proyecto de manera general, para cargar scripts, librerías externas al proyecto, assets. Fichero 


con configuración general. 


karma.conf.js — Es un fichero para configurar temas de pruebas. 

package.json — Es el fichero donde configuramos la versión del framework, scripts, dependencias y componentes. 
README.md > Descripción del proyecto, con documentación. 

Los ficheros que empiezan por tsconfig son ficheros de configuración de TypeScript (el JS mejorado). 
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6. Fontend con Angular 


Directorio app dentro de src del proyecto de la aplicación: 
pornos 


2 acerca 


> article 


2 article 
> articles Y app 
r components 


> contacto w acerca 


EE Cai <> acerca.component.html 
ompon s > footer 


> header $ acerca.component.scss 
AN A AS 
> login 
> main acerca.component.ts 


> nav 

Ro 11179) > politica-c 
w environments > politica-de-privacidad 

environment.prod.ts > search 

inmentts > sidebar 

EN slider 
< index.html 

ME 


polyfills.ts 
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EY No 


6. Fontend con Angular 


e Librerías utilizadas en Angular: 
e Bootstrap 5.1.3 (frameworks de CSS con librería de estilos) 


e Bootstrap-icons 1.8.2 (Librería de iconos) 
* ngx-moment v6.0.2 (formatea fechas) 


e angular-jwt 5.0.2 (Para comprobar tokens bajo el estándar jwt). 
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6. Fontend con Angular 
e Casos de uso: 


Invitado Registrado 


Y 
Navegar y visualizar la web 
EY 
p MH Editar artículos |< 
E 


q 
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7. Diseño de interfaz de usuario 


Publicidad 


Imagen 2 


Publicidad 


Publicidad 


- a Políticas d dad 
titulo de artículo muestra a 


UTA e Publici 
Últimos artículos ublicidad 


titulo de artículo muestra 


titulo 
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Publicidad 
Publicidad 


Políticas de privacidad 


